<template>
    <div class="treeBox">
        <div
            class="treeLeft treeItem"
            style="width: 25%"
        >
            <el-input
                v-model="filterText"
                style="width: 100%; margin-bottom: 10px"
                placeholder="请输入节点名称"
            />
            <el-scrollbar :style="{ height: hHeight - 226 + 'px' }">
                <el-tree
                    ref="treeRef"
                    style="max-width: 600px"
                    :data="dataSource"
                    node-key="id"
                    default-expand-all
                    :expand-on-click-node="false"
                    class="filter-tree"
                    :props="defaultProps"
                    :filter-node-method="filterNode"
                    :highlight-current="true"
                    :style="{ height: hHeight - 196 + 'px' }"
                >
                    <template #default="{ node, data }">
                        <span
                            class="custom-tree-node"
                            @click="handleDepNode('detailNode', node, data)"
                        >
                            <span style="display: inline-block">{{
                                node.label
                            }}</span>
                            <span class="options">
                                <el-icon
                                    class="elIcon"
                                    :size="16"
                                    @click.stop="
                                        handleDepNode('addNode', node, data)
                                    "
                                >
                                    <Plus />
                                </el-icon>
                                <el-icon
                                    v-if="data.isComp !== 1"
                                    class="elIcon"
                                    :size="16"
                                    @click.stop="
                                        handleDepNode('editNode', node, data)
                                    "
                                >
                                    <Edit />
                                </el-icon>
                                <el-icon
                                    v-if="data.isComp !== 1"
                                    class="elIcon"
                                    :size="16"
                                    @click.stop="
                                        handleDepNode('deleteNode', node, data)
                                    "
                                >
                                    <Delete />
                                </el-icon>
                            </span>
                        </span>
                    </template>
                </el-tree>
            </el-scrollbar>

            <el-button
                type="primary"
                style="width: 100%; margin-top: 15px;background-color: #58be3f;"
                @click="handleDepNode('add')"
            >
                <el-icon
                    class="elIcon"
                    :size="16"
                    color="#fff"
                >
                    <Plus />
                </el-icon>
                新增根目录/菜单
            </el-button>
        </div>
        <div
            class="treeRight treeItem"
            style="width: 75%"
        >
            <div class="menuOperationTitle">
                <p></p>
                <div class="titleName">
                    菜单操作区
                    <span>（根据左侧指令进行操作）</span>
                </div>
            </div>
            <Detail
                v-show="detailTypeProps !== ''"
                :ruleFormProps="depProps"
                :type="detailTypeProps"
                @updateDep="updateDep"
            ></Detail>

            <div
                class="emptyBox"
                v-show="detailTypeProps == ''"
            >
                <el-empty
                    class="emptyNodata"
                    description="暂无数据"
                    v-show="true"
                    :image-size="60"
                />
            </div>
        </div>
    </div>
</template>

<script setup>
import menuHttp from "@/https/menu.js";
import { userStore } from "@/store/modules/user.js";
import { getMenuRoutes } from "@/utils/menuAuth.js";
import Storage from "@/utils/storage.js"; // storage工具类，简单的封装
import { Delete, Edit, Plus } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { nextTick, onMounted, reactive, ref, watch } from "vue";
import Detail from "./components/detail.vue";

import { useRouter } from "vue-router";
const userInfo = userStore();
console.log(userInfo.menuList, "store");

const router = useRouter();
const handleClick = () => { };
const filterText = ref("");
const treeRef = ref();
const dataSource = ref([]);
const defaultProps = {
    children: "children",
    label: "name",
};

const userId = ref(Storage.localGet("loginId"));
watch(filterText, (val) => {
    treeRef.value.filter(val);
});
const filterNode = (value, data) => {
    if (!value) return true;
    return data.depName.includes(value);
};
const search = async () => {
    let params = {
        pageNo: 1,
        pageSize: 1000,
    };
    const res = await menuHttp.menuMenuList(params);
    if (res.data.code === 200) {
        dataSource.value = res.data.data;
    }
};
const depProps = reactive({
    id: "",
    parentId: "",
    parentName: "",
    name: "",
    category: "",
    path: "",
    modulePath: "",
    icon: "Platform",
    routeName: "",
    sort: 0,
    status: 1,
});
const detailTypeProps = ref("");
const handleDepNode = async (type, node, data) => {
    console.log("111111111", type, node, data);
    depProps.id = "";
    depProps.parentId = "";
    depProps.parentName = "";
    depProps.name = "";
    depProps.category = "";
    depProps.path = "";
    depProps.modulePath = "";
    depProps.icon = "";
    depProps.routeName = "";
    depProps.sort = 0;
    depProps.status = 1;
    if (type == "add") {
    } else if (type == "addNode") {
        console.log(node, data);
        depProps.parentId = data.id;
        depProps.parentName = data.name;
    } else if (type == "editNode" || type == "detailNode") {
        depProps.id = data.id;
        depProps.parentId = data.parentId;
        depProps.parentName = data.parentName;
        depProps.name = data.name;
        depProps.category = data.category + "";
        depProps.path = data.path;
        depProps.modulePath = data.modulePath;
        depProps.icon = data.icon;
        depProps.routeName = data.routeName;
        depProps.sort = data.sort;
        depProps.status = data.status;
    } else if (type == "deleteNode") {
        depProps.id = data.id;
        depProps.parentId = data.parentId;
        depProps.parentName = data.parentName;
        depProps.name = data.name;
        depProps.category = data.category + "";
        depProps.path = data.path;
        depProps.modulePath = data.modulePath;
        depProps.icon = data.icon;
        depProps.routeName = data.routeName;
        depProps.sort = data.sort;
        depProps.status = data.status;
        ElMessageBox.confirm(`确认菜单【${depProps.name}】吗？`, `删除`, {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
        }).then(() => {
            menuHttp.menuRemoveMenu(depProps).then((res) => {
                if (res.data.code === 200) {
                    detailTypeProps.value = "";
                    search();
                }
            });
        });
    }
    detailTypeProps.value = type;
};
const updateDep = async () => {
    ElMessage({
        type: "success",
        message:
            detailTypeProps.value == "add" || detailTypeProps.value == "addNode"
                ? "新增成功"
                : "更新成功",
    });
    detailTypeProps.value = "";
    search();
    updateRoute();
};
const updateRoute = async () => {
    getMenuRoutes(
        () => { },
        () => {
            console.log(1111);
            // router.push({ path: "/main" });
            window.location.reload();
        }
    );
    // ;
    // window.location.reload();
};
const hHeight = ref(0);
onMounted(() => {
    nextTick(() => {
        hHeight.value = document.documentElement.clientHeight;
    });
    search();
});
</script>
<style lang="less" scoped>
.treeBox {
    display: flex;
    flex-direction: row;
    .treeLeft {
        border-right: 1px solid #ddd;
    }
    .treeItem {
        min-height: 300px;
        padding: 20px;
        box-sizing: border-box;
    }
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
    .options {
        display: none;
        .elIcon {
            color: #606266;
            margin-right: 2px;
        }
    }
    &:hover .options {
        display: block;
    }
}
.menuOperationTitle {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #777;
    border-bottom: 1px solid #ddd;
    padding-bottom: 8px;
    margin-bottom: 20px;
    p {
        width: 4px;
        height: 16px;
        background: #58be3f;
    }
    .titleName {
        font-size: 14px;
        margin-left: 10px;
        span {
            font-size: 12px;
        }
    }
}
</style>